import React, {Component,Fragment} from 'react';

import Layout from '&components/layout';

import { connect } from 'react-redux';

import { Table, Input, Button, Card } from 'antd';

import {SearchOutlined} from '@ant-design/icons'

import Highlighter from 'react-highlight-words';

import style from './styles.module.less';

import { Radar } from '@ant-design/charts';

// import MyRadar from './radar'
const data1 = [
  {item: "Design", user: "a", score: 70},
  {item: "Design", user: "b", score: 30},
  {item: "Development", user: "a", score: 60},
  {item: "Development", user: "b", score: 70},
  {item: "Marketing", user: "a", score: 50},
  {item: "Marketing", user: "b", score: 30},
]


const config = {
    data: data1,
    xField: 'item',
    yField: 'score',
    seriesField: 'user',
    meta: {
      score: {
        alias: '分数',
        min: 0,
        max: 80,
      },
    },
    xAxis: {
      line: null,
      tickLine: null,
      grid: {
        line: {
          style: {
            lineDash: null,
          },
        },
      },
    },
    yAxis: {
      line: null,
      tickLine: null,
      grid: {
        line: {
          type: 'line',
          style: {
            lineDash: null,
          },
        },
      },
    },
    // 开启面积
    area: {},
    // 开启辅助点
    point: {},
  };

const data = [
  {
    key: '1',
    id: '1',
    year: '2018',
    major: 'ymz',
    stuId:'1',
    name:'yzm',
  },
  {
    key: '2',
    id: '2',
    year: '2028',
    major: 'ymz',
    stuId:'2',
    name:'yzm',
  },{
    key: '3',
    id: '3',
    year: '2038',
    major: 'ymz',
    stuId:'3',
    name:'yzm',
  },{
    key: '4',
    id: '4',
    year: '2048',
    major: 'ymz',
    stuId:'4',
    name:'yzm',
  },
];

class StudentAnalysis extends Component {
  columns = [
  {
    title: '学生编号',
    dataIndex: 'id',
    key: 'id',
    align:'center',
    width:20,
    ...this.getColumnSearchProps('id'),
  },
  {
    title: '年级',
    dataIndex: 'year',
    key: 'year',
    align:'center',
    width:20,
  },
  {
    title: '专业名称',
    dataIndex: 'major',
    key: 'major',
    width:20,
    ...this.getColumnSearchProps('major'),
  },
  {
    title: '学号',
    key: 'stuId',
    dataIndex: 'stuId',
    width:20,
    ...this.getColumnSearchProps('stuId'),
  },
  {
    title: '姓名',
    key: 'name',
    dataIndex: 'name',
    width:20,
    ...this.getColumnSearchProps('name'),
  }
];
  getColumnSearchProps(dataIndex){
        return ({
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div style={{ padding: 8 }}>
                    <Input
                        ref={node => {
                            this.searchInput = node;
                        }}
                        placeholder={`请输入要查询的内容`}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
                        style={{ width: 188, marginBottom: 8, display: 'block' }}
                    />
                    <Button
                        type="primary"
                        onClick={() => this.handleSearch(selectedKeys, confirm)}
                        icon="search"
                        size="small"
                        style={{ width: 90, marginRight: 8 }}
                    >
                        查询
                    </Button>
                    <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
                        重置当前项
                    </Button>
                </div>
            ),
            filterIcon: filtered => (
                // <Icon type="search" style={{ color: filtered ? '#1890ff' : "#87c38f" ,
                //     fontSize:'20px',
                // }} />
                <SearchOutlined />
                
            ),
            onFilter: (value, record) =>
                record[dataIndex]
                    .toString()
                    .toLowerCase()
                    .includes(value.toLowerCase()),
            onFilterDropdownVisibleChange: visible => {
                if (visible) {
                    setTimeout(() => this.searchInput.select());
                }
            },
            render: text => (
                <Highlighter
                    highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
                    searchWords={[this.props.store.searchText]}
                    autoEscape
                    textToHighlight={text?text.toString():''}
                />
            ),
        })
    }
    handleSearch(selectedKeys, confirm){
        confirm();
        this.props.searchTextChange(selectedKeys[0]);
    }
    handleReset(clearFilters){
        clearFilters();
        this.props.searchTextChange('');
    }
	render(){
		return(
			<Fragment>
        <div className={style.wrapper}>
          <div className={style.container}>
            <div className={style.studentList}>
              <Card size="small" title="学生专业列表" bodyStyle={{padding:0}} hoverable>
                <Table columns={this.columns} dataSource={data} size="small" pagination={{}}/>
              </Card>
            </div>
            <div className={style.ability}>
              <Card size="small" title="学生毕业能力雷达图" hoverable>
                <Radar {...config}></Radar>
                {/* <MyRadar></MyRadar> */}
              </Card>
            </div>
          </div>
          <div className={style.detail}>
            <Card size="small" title="学生毕业能力详细数据" hoverable>
              <table> 
                <tr> 
                  <td>1</td> 
                  <td>2</td> 
                </tr> 
                <tr> 
                  <td>3</td> 
                  <td>4</td> 
                </tr> 
              </table>
            </Card>
          </div>
        </div>
      </Fragment>
        
		)
	}
}

const mapStateToProps = (state) => { return {store: state.studentAnalysis}}
const mapDispatchToProps = dispatch => ({
  searchTextChange:dispatch.studentAnalysis.searchTextChange
})

export default connect(mapStateToProps,mapDispatchToProps)(StudentAnalysis);